<template>
	<div class="heightMax" v-loading='loading'>
		<vueScroll>
			<div class="flex">
				<div class="publicbox">
					<div class="listName">
						<i></i><span class="font14">电梯基本信息</span>
					</div>
					<el-form :model="form" size="mini" ref='form'>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="设备代码:">
									<div class="textLeft">{{form.resCode}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="档案编号:">
									<div class="textLeft">{{form.fileNum}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="设备类型:">
									<div class="textLeft">{{form.deviceType}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="设备名称:">
									<div class="textLeft">{{form.deviceName}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="出厂编号:">
									<div class="textLeft">{{form.serialNumber}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="设备型号:">
									<div class="textLeft">{{form.unitType}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="制造日期:">
									<div class="textLeft">{{form.manufDate}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="注册状态:">
									<div class="textLeft">{{form.registratStatus}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="是否新梯:">
									<div class="textLeft">{{form.isNewLift}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="96333编号:">
									<div class="textLeft">{{form.number}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="注册日期:">
									<div class="textLeft">{{form.recodeDate}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="制造单位:">
									<div class="textLeft">{{form.manufactureCompany}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="到检日期:">
									<div class="textLeft">{{form.checkDate}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="使用地点:">
									<div class="textLeft">{{form.usingSite}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="使用单位:">
									<div class="textLeft">{{form.buildingUser}}</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="publicbox" style="margin-top: 5px;">
					<div class="listName">
						<i></i>
						<div class="font14">电梯参数信息</div>
					</div>
					<el-form :model="formTwo" size="mini">
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="层数:">
									<div class="textLeft">{{formTwo.plies}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="门数:">
									<div class="textLeft">{{formTwo.doors}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="站数:">
									<div class="textLeft">{{formTwo.stations}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="速度:">
									<div class="textLeft">{{formTwo.speed}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="重量:">
									<div class="textLeft">{{formTwo.weight}}</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="publicbox" style="margin-top: 5px;">
					<div class="listName">
						<i></i>
						<div class="font14">相关单位信息</div>
					</div>
					<el-form :model="formThree" size="mini">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="维保单位:">
									<div class="textLeft">{{formThree.maintenanceUnit}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维保电话:">
									<div class="textLeft">{{formThree.maintenanceNum}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="检验单位:">
									<div class="textLeft">{{formThree.inspectionUnit}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="检验人员:">
									<div class="textLeft">{{formThree.inspectionPerson}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="监察单位:">
									<div class="textLeft">{{formThree.checkUnit}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="监察电话:">
									<div class="textLeft">{{formThree.checkNum}}</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="使用单位:">
									<div class="textLeft">{{formThree.userCompany}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="物业电话:">
									<div class="textLeft">{{formThree.propertyNum}}</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</vueScroll>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	export default {
		mounted() {
			this.getList()
		},
		data() {
			return {
				loading: false,
				form: {
					resCode: '',
					fileNum: '',
					deviceType: '',
					deviceName: '',
					serialNumber: '',
					unitType: '',
					manufDate: '',
					registratStatus: '',
					isNewLift: '',
					number: '',
					recodeDate: '',
					manufactureCompany: '',
					checkDate: '',
					usingSite: '',
					buildingUser: ''
				},
				formTwo: {
					plies: '',
					doors: '',
					stations: '',
					speed: '',
					weight: ''
				},
				formThree: {
					maintenanceUnit: '',
					maintenanceNum: '',
					inspectionUnit: '',
					inspectionPerson: '',
					checkUnit: '',
					checkNum: '',
					userCompany: ''
				}
			}
		},
		computed: {
			liftId() {
				if (localStorage.liftDetailId) {
					return JSON.parse(localStorage.liftDetailId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			getList() {
				if (this.liftId) {
					this.loading = true
					let params = {
						id: this.liftId
					}
					axiosGet('/manu/elevator/basic/statistics', params, (res) => {
						this.loading = false
						if (res.code == 0) {
							this.form.resCode = res.detail.register_code
							this.form.deviceType = res.detail.elevator_type
							this.form.deviceName = res.detail.elevator_name
							this.form.serialNumber = res.detail.factory_no
							this.form.unitType = res.detail.elevator_model
							this.form.registratStatus = res.detail.registry_status
							this.form.number = res.detail.num
							this.form.recodeDate = res.detail.registry_time
							this.form.manufactureCompany = res.detail.manufacturer_company_name
							this.form.checkDate = res.detail.next_yearly_inspection_date
							this.form.usingSite = res.detail.installation_place
							this.formThree.userCompany = res.detail.property_company_name
							this.formThree.maintenanceUnit = res.detail.maintain_company_name
							this.formThree.maintenanceNum = res.detail.phone_num
							this.formThree.checkUnit = res.detail.inspection_company
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 5px;

		i {
			width: 3px;
			height: 15px;
			background: #2d8cf0;
			margin: 5px 5px;
		}
	}

	.el-form {
		padding-left: 20px;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
		height: 100%;
		flex-direction: column;

		.publicbox {
			flex: 1;
		}
	}

	.el-row {
		margin: 0 !important;
	}
</style>
